{% extends "base.html" %}
{% block main %}
<div class="container">
  <div class="columns is-mobile is-vcentered my-0 mx-0">
    <div class="column is-9">
      <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
        <ul>
          <li>
            <a href="/" class="has-text-info">
              <span class="icon is-small">
                <i class="fas fa-home" aria-hidden="true"></i>
              </span>
              <span>主页</span>
            </a>
          </li>
          <li class="is-active">
            <a href="/images">
              <span class="icon is-small has-text-primary">
                <i class="far fa-images" aria-hidden="true"></i>
              </span>
              <span>在线图床</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="column is-3">
      <div class="is-pulled-right">
        <a class="button is-primary" href="/images/add">
          <span class="icon is-small">
            <i class="fas fa-upload"></i>
          </span>
          <span>上传图片</span>
        </a>
      </div>
    </div>
  </div>
  <div class="columns is-multiline my-0 mx-0">
    {% for image in images %}
    <div class="column is-3 is-narrow">
      <div class="card">
        <div class="card-image">
          <figure class="image">
            <img src="{{ image.url }}">
          </figure>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}
